<template>
  <page-wrap back hide-tab :show-top="showTop" :bg-color="uNavColor" :title="consultantInfo.iname" :dark="false">
    <view class="info-wrapper">
      <view class="consultant-top" :style="'padding-top:' + navHeight + 'px;'"></view>
      <view class="user-info">
        <view class="header">
          <view class="header-left">
            <image class="avatar" :src="consultantInfo.pic"></image>
            <text class="online-status">{{
              consultantInfo.isOnline == 1 ? "在线" : "离线"
            }}</text>
            <image class="sex" :src="consultantInfo.sex == '男' ? male : female"></image>
          </view>
          <view class="header-right">
            <view class="username-box">
              <text class="username">{{ consultantInfo.iname || "" }}</text>
              <image class="consultant-tag" :src="consultant"></image>
            </view>
            <view class="tags">
              <text :class="['tag', `tag${(index % 3) + 1}`]" v-for="(item, index) in consultantInfo.consultantTagList"
                :key="item">{{ item }}</text>
            </view>
          </view>
        </view>
        <view class="detail">
          <view class="detail-header">
            <text class="info spe" v-if="consultantInfo.personZw">{{
              consultantInfo.personZw || ""
            }}</text>
            <text class="info" v-if="consultantInfo.regionName">{{
              consultantInfo.regionName || ""
            }}</text>
          </view>
          <view class="detail-item">
            <view class="detail-item-box">
              <image class="item-img" :src="goodAt"></image>
              <text class="label">擅长：</text>
            </view>
            <text class="value">{{ consultantInfo.goodAt || "" }}</text>
          </view>
          <view class="detail-item">
            <image class="item-img" :src="phone"></image>
            <text class="label">联系方式：</text>
            <text class="value">{{ consultantInfo.servicePhone || "" }}</text>
          </view>
          <view class="detail-item">
            <image class="item-img" :src="email"></image>
            <text class="label">邮箱：</text>
            <text class="value">{{ consultantInfo.serviceMail || "" }}</text>
          </view>
        </view>
        <view class="desc">
          <view class="desc-item">
            <view class="value">{{ consultantInfo.star }}</view>
            <view class="title">服务评分</view>
          </view>
          <view class="line"></view>
          <view class="desc-item">
            <view class="value">{{ consultantInfo.serviceCount?consultantInfo.serviceCount+'+' :0 }}</view>
            <view class="title">服务人数</view>
          </view>
          <view class="line"></view>
          <view class="desc-item">
            <view class="value">{{ consultantInfo.gznum }}</view>
            <view class="title">从业年限</view>
          </view>
        </view>
        <view class="topic">
          <view class="header-box">
            <text class="line"></text>
            <text class="title">高频咨询话题</text>
          </view>
          <view class="topic-item" v-for="item in consultantInfo.highTopicList" :key="item">
            <view style="display: flex">
              <image class="well" :src="well"></image>
              <text class="text">{{ item }}</text>
            </view>
            <!-- <u-icon name="arrow-right" color="#c0c0c0" size="32"></u-icon> -->
            <!-- <image class="right-arrow" :src="rightArrow"></image> -->
          </view>
        </view>
        <view class="tips">
          <view class="tip1">一览职途 · 认证顾问</view>
          <view class="tip2">致力于成为您的职场“搭子”</view>
          <view class="tip3">本页面内容由顾问编辑，信息来源于该顾问</view>
        </view>
        <view class="operation" v-if="!isConsultant">
          <u-button type="primary" shape="circle" class="btn" @click="toChat">在线咨询</u-button>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { consultantInfo } from "@/api/modules/career";
export default {
  data() {
    return {
      navHeight: getApp().globalData.navHeight + uni.upx2px(114),
      defaultAvatar: this.$imgBase + "common/avatar_default.png",
      male: this.$imgBase + "career/careerAssessResult/male.png",
      female: this.$imgBase + "career/careerAssessResult/female.png",
      goodAt: this.$imgBase + "career/careerAssessResult/goodAt.png",
      phone: this.$imgBase + "career/careerAssessResult/phone.png",
      email: this.$imgBase + "career/careerAssessResult/email.png",
      well: this.$imgBase + "career/careerAssessResult/well.png",
      rightArrow: this.$imgBase + "career/careerAssessResult/right-arrow.png",
      consultant:
        this.$imgBase + "career/careerAssessResult/consultant-tag.png",
      showTop: false,
      uNavColor: "#101930",
      consultantInfo: {},
      consultantId: "",
    };
  },
  computed: {
    // 是否人企沟通
    isConsultant() {
      return getApp().globalData.loginStatus == "consultant";
    },
  },
  onLoad(opt) {
    this.personId = opt.personId || "";
  },
  mounted() {
    this.consultantInfoFn();
  },
  methods: {
    consultantInfoFn() {
      const params = {
        consultantId: parseInt(this.personId),
      };
      consultantInfo(params).then((res) => {
        if (res.code == 200) {
          const goodAtList = res.data.goodAt ? res.data.goodAt.split("，") : [];
          this.consultantInfo = res.data;
          this.consultantInfo.goodAtList = goodAtList;
        }
      });
    },
    toChat() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
$img-base-person: $img-base + "career/careerAssessResult/";
@include img-base-self(".consultant-top", "career/careerAssessResult/back.png");
.consultant-top {
  height: 402rpx;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  // border-radius: 0 0 68rpx 68rpx;
}
.info-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 115rpx;
  position: relative;
  .user-info {
    border-radius: 30rpx;
    margin-top: -230rpx;
    padding: 0 24rpx 0 24rpx;
    .header {
      padding: 28rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: #fff;
      border-radius: 16rpx 16rpx 0 0;
      &-left {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 24rpx;
        .avatar {
          width: 156rpx;
          height: 156rpx;
          border-radius: 50%;
        }
        .online-status {
          flex-shrink: 0;
          margin-top: -34rpx;
          padding: 2rpx 20rpx;
          border-radius: 25rpx;
          background: #26c467;
          border: 3px solid #ffffff;
          text-align: center;
          font-size: 24rpx;
          color: #fff;
        }
        .sex {
          position: absolute;
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
          position: absolute;
          right: 0;
          top: 15rpx;
        }
      }
      &-right {
        .username-box {
          display: flex;
          .username {
            font-size: 40rpx;
            font-weight: 600;
            margin-bottom: 12rpx;
          }
          .consultant-tag {
            width: 54rpx;
            height: 46rpx;
          }
        }
        .tags {
          display: flex;
          flex-wrap: wrap;
          .tag {
            padding: 4rpx 12rpx;
            margin: 12rpx;
            border-radius: 4rpx;
          }
          .tag1 {
            background-color: #fdefde;
            color: #fb5806;
            font-size: 24rpx;
          }
          .tag2 {
            background-color: #e2f4df;
            color: #188f3b;
            font-size: 24rpx;
          }
          .tag3 {
            background-color: #ebe9ff;
            color: #4d43aa;
            font-size: 24rpx;
          }
        }
      }
    }
    .detail {
      padding: 2rpx 28rpx 40rpx 28rpx;
      background-color: #fff;
      font-size: 26rpx;
      &-header {
        margin-bottom: 18rpx;
        .info {
          padding-right: 21rpx;
          margin: 0 21rpx 28rpx 0;
        }
        .spe {
          border-right: 1px solid #e6e6e6;
        }
      }
      &-item {
        display: flex;
        padding: 10rpx 0;
        &-box {
          display: flex;
          align-items: center;
          flex-shrink: 0;
        }
        .item-img {
          width: 36rpx;
          height: 36rpx;
          margin-right: 12rpx;
        }
      }
    }
  }
  .desc {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 24rpx;
    background: #f9f9f9;
    &-item {
      text-align: center;
      .value {
        padding-bottom: 16rpx;
        font-size: 40rpx;
        font-weight: 600;
      }
      .title {
        font-size: 26rpx;
      }
    }
    .line {
      width: 2rpx;
      height: 84rpx;
      background: #e6e6e6;
    }
  }
  .topic {
    margin-top: 24rpx;
    padding: 28rpx 24rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .header-box {
      display: flex;
      align-items: center;
      margin-bottom: 18rpx;
      .line {
        width: 6rpx;
        height: 28rpx;
        background: #f75a3e;
        margin-right: 20rpx;
        border-radius: 6rpx;
      }
      .title {
        font-size: 36rpx;
      }
    }
    &-item {
      padding: 12rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #555555;
      .well {
        width: 36rpx;
        height: 36rpx;
        margin-right: 14rpx;
      }
      .text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .spe {
        padding-right: 12rpx;
      }
      .right-arrow {
        width: 32rpx;
        height: 32rpx;
        margin-left: auto;
      }
    }
  }
  .tips {
    text-align: center;
    margin-top: 32rpx;
    &-ite {
      display: flex;
      align-items: center;
    }
    .tip1 {
      color: #bfbfbf;
      padding-bottom: 18rpx;
      font-size: 32rpx;
    }
    .tip2 {
      color: #bfbfbf;
      padding-bottom: 30rpx;
      font-size: 26rpx;
    }
    .tip3 {
      color: #bfbfbf;
      font-size: 24rpx;
    }
  }
  .operation {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 32rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: calc(2rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(2rpx + env(safe-area-inset-bottom));
    .btn {
      width: 100%;
    }
  }
}
</style>
